<html>
	<head>
		<script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script>
		<script src='https://surikov.github.io/webaudiofontdata/sound/0520_Chaos_sf2_file.js'></script>
		<script src='https://surikov.github.io/webaudiofontdata/sound/0530_Soul_Ahhs_sf2_file.js'></script>
		<script>
			var womanPreset=_tone_0530_Soul_Ahhs_sf2_file;
			var manPreset=_tone_0520_Chaos_sf2_file;
			var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
			var audioContext = new AudioContextFunc();
			var player=new WebAudioFontPlayer();
			var manGain = audioContext.createGain();
			manGain.connect(audioContext.destination);
			var womanGain = audioContext.createGain();
			womanGain.connect(audioContext.destination);
			player.loader.decodeAfterLoading(audioContext, '_tone_0530_Soul_Ahhs_sf2_file');
			player.loader.decodeAfterLoading(audioContext, '_tone_0520_Chaos_sf2_file');
		</script>
	</head>
	<body>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<a href="#" onmousedown="player.queueWaveTable(audioContext, manGain, manPreset, 0, 12*4+0, 3);">
						<img src="https://surikov.github.io/webaudiofont/img/voiceMan.jpg" width="285" height="214">
					</a>
				</td>
				<td rowspan="2">
					<a href="#" onmousedown="player.queueWaveTable(audioContext, womanGain, womanPreset, 0, 12*5+0, 3);">
						<img src="https://surikov.github.io/webaudiofont/img/voiceWoman.jpg" width="375" height="456">
					</a>
				</td>
			</tr>
			<tr>
				<td>
					<p>Man volume</p>
					<p>
						<input type="range" id="maRange" value="1.0"  min="0.2" max="1" step=0.2 onchange="manGain.gain.value=this.value;">
					</p>
					<p>Woman volume</p>
					<p>
						<input type="range" id="woRange" value="1.0" min="0.2" max="1" step=0.2 onchange="womanGain.gain.value=this.value;">
					</p>
				</td>
			</tr>
		</table>
		<hr/>
		<p><a href="https://surikov.github.io/webaudiofont/">source</a></p>
</body>
</html>